<template>
    <div class="bigBox">
        <!-- 导航栏 -->
        <div class="user" >
            <!-- 用户栏 -->
            <div class='username'>
                <div class="user_pic" @mouseout="changeShow2()" @mouseover="changeShow1()" @click="turnToAdmin" >
                    <img src="@/assets/00.png" alt="" class="img1" v-show="!pic_show" >
                    <img src="@/assets/11.png" alt="" class="img0" v-show="pic_show" >
                </div>
                <div class="admin">
                    <span>饲养员：{{name}}</span><br>
                    <span>{{centence}}</span>
                </div>
            </div>
            <!-- 操作栏 -->
            <div class="adminitrate">
                <ul>
                    <li class="li1" @click="clickBlog">管理文章 
                        <i class="iconfont icon-right" ></i>
                    </li>
                    <li class="li2" @click="clickPic">管理相册
                        <i class="iconfont icon-right" ></i>
                    </li>
                    <li class="li3" @click="turnToBlog">发布博客
                        <i class="iconfont icon-right" ></i>
                    </li>
                    <li class="li4">退出登录
                        <i class="iconfont icon-guanji"></i>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 工作台 -->
        <div class="workBench" v-show="show">
            <!-- 上边说明栏 -->
            <div class="topBox">
                <!-- 标题 -->
                <span class="left">标题</span>
                <!-- 发布时间 -->
                <span class="time">发布时间</span>
                <!-- 操作栏 -->
                <span class="workk">操作</span>
            </div>
            <!-- 文章的增删改查 -->
            <ul>
                <li v-for="b in blogList" :key="b.id">
                    <!-- 标题 -->
                    <div class="left">
                        <span class="title">{{b.title}}</span>
                    </div>
                    <!-- 发布时间 -->
                    <div class="time">
                        <span class="time1">{{b.time|timeFilter}}</span>
                    </div>
                    <!-- 删除 查看 编辑 -->
                    <div class="workk">
                        <!-- 查看 -->
                        <span class="see" @click="turnToArticle(b)"><i class="iconfont icon-chakan"></i></span>
                        <!-- 编辑 -->
                        <span class="do" @click="turnToupdateBlog(b)"><i class="iconfont icon-bianji"></i></span>
                        <!-- 删除 -->
                        <span class="delete" @click="deleteBlog(b)"><i class="iconfont icon-shanchu "></i></span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="picBox" v-show="!show">
            <div class="topBox">
                <!-- 标题 -->
                <span class="left">图片</span>
                <!-- 发布时间 -->
                <span class="time">路径</span>
                <!-- 操作栏 -->
                <span class="workk">操作</span>
            </div>
            <ul>
                <li v-for="i in imgUrl" :key="i.id">
                    <!-- 照片 -->
                    <div class="left">
                        <span class="title">
                            <img :src="'http://1.12.58.122:3007'+i.url" alt="" class="pic">
                        </span>
                    </div>
                    <!-- 路径 -->
                    <div class="time">
                        <span class="time1">{{i.url}}</span>
                    </div>
                    <!-- 删除-->
                    <div class="workk">
                        <!-- 删除 -->
                        <el-button type="primary" icon="el-icon-delete" class="delete2" @click="deletePic(i.id)"></el-button>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
// 引入axios
import axios from 'axios'
export default {
    name:'admin',
    data(){
        return {
            isShow:true,
            name:'爱学习的小狼',
            centence:'放弃幻想，准备战斗',
            pic_show:true,
            show:true,
        }
    },
    methods:{
        changeShow1(){
            this.pic_show = false
        },
        changeShow2(){
           this.pic_show = true
        },
        turnToAdmin(){
            this.$router.push({
                path:'/admin'
            })
        },
        turnToBlog(){
            this.$router.push({
                path:'/blog'
            })
        },
        turnToArticle(b){
            let blog = b
            this.$router.push({
                path:'/article',
                query:{
                    blog:blog
                }
            })
        },
        turnToupdateBlog(b){
            console.log(b)
            this.$router.push({
                path:'/updateBlog',
                query:{
                    title:b.title,
                    sort:b.sort,
                    context:b.context,
                    cover_img:b.cover_img,
                    summary:b.summary,
                    time:b.time,
                    id:b.id,
                    nowtime:b.nowtime,
                }
            })
        },
        deleteBlog(b){
            let id = b.id
            if(window.confirm('主人，不要让我离开你o(TヘTo)')){
                this.$axios.post('http://1.12.58.122:3007/api/article/delete',{id})
            }
        },
        clickBlog(){
            this.show = true
        },
        clickPic(){
            this.show = false
        },
        deletePic(i){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                axios.post('http://1.12.58.122:3007/api/deletePic',{id:i})
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });  
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        }
    },
    computed:{
        ...mapState(['blogList','imgUrl']),
        //时间戳
        // timeFilter() {
        //     const data = this.data
        //     var y = date.getFullYear() + '-';
        //     var m = date.getMonth() + 1 + '-';//因为是月从0开始，所以得加1
        //     var d = date.getDate();
        //     return y + m + d;
        // }
    },
    filters:{
        timeFilter(data) {
            var date = new Date(data);
            //2020-11-19
            var y = date.getFullYear() + '-';
            var m = date.getMonth() + 1 + '-';//因为是月从0开始，所以得加1
            var d = date.getDate();
            return y + m + d;
        }
    }
}
</script>

<style scoped>
.bigBox {
    position: relative;
    background-color: transparent;
    height: 100%;
    font-family: "NLXJ-BODY";
}
.user {
    /* background-color: pink; */
    height: 100%;
    width: 20%;
    position: fixed;
    top: 8%;
    left: 10%;
    z-index: 99;
}
.username {
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(255,255,255,0.9);
    height: 33.33%;
    width: 100%;
}
.label {
    position: absolute;
    left: 0;
    top: 52%;
    background-color:rgba(255,255,255,0.9);
    height: 49%;
    width: 100%;
}
.tag {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%);
    height: 10%;
    width: 100%;
    font-size: 15px;
    color:rgb(190, 139, 156) ;
}
.user_pic {
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translate(-50%);
    background-color: transparent;
    width: 30%;
    height: 40%;
    border: 1px solid gray;
    border-radius: 49%;
    overflow: hidden;
    cursor: pointer;
    z-index: 9;
}
.img1 {
    width:100%;
    height:100%;
}
.img0 {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    margin-top: -1px;
}
.admin {
    width: 100%;
    height: 30%;
    background-color: transparent;
    font-size: 15px;
    text-align: center;
    position: absolute;
    top: 60%;
    color:rgb(190, 139, 156);
    /* background-color: green; */
}
.admin span {
    display: inline-block;
    padding:5px;
}
.adminitrate {
    position: absolute;
    left: 0;
    top: 33.33%;
    width: 100%;
    height: 66.66%;
    /* background-color: green; */
}
.adminitrate ul {
    background-color: rgba(255,255,255,0.9);
    width: 100%;
    height: 100%;
}
.adminitrate ul li {
    position: relative;
    height: 50px;
    width: 100%;
    font-size: 20px;
    text-align: left;
    text-indent: 2em;
    line-height: 50px;
    cursor: pointer;
}
li:hover {
    background-color: white;
}
.iconfont {
    position: absolute;
    font-size: 25px;
    right: 10%;
}
.workBench{
    background-color: rgba(255,255,255,0.9);
    height: 92%;
    width: 60%;
    position: absolute;
    top: 8%;
    left: 30%;
}
.topBox{
    background-color: white;
    font-size: 16px;
    position: absolute;
    top: 0;
    left: 0;
    height: 10%;
    width: 100%;
    z-index: 1
}
.workBench ul {
    position: relative;
    top: 10%;
    background-color: white;
    width: 100%;
    font-size: 15px;
    color: black;
}
.workBench ul li {
    position: relative;
    left: 50%;
    transform: translate(-50%);
    height: 100px;
    width: 100%;
    font-size: 15px;
    color: black;
    background-color: transparent;
}
.left {
    background-color: transparent;
    position: absolute;
    font-size: 20px;
    top: 0;
    left: 10%;
    width: 26.66%;
    height: 100%;
    color: black;
    border-right: 0.1px solid gray;
    border-bottom: 1px solid gray;
    line-height:60px ;
}
.time {
    background-color: transparent;
    position: absolute;
    font-size: 20px;
    top: 0;
    left: 36.66%;
    width: 26.66%;
    height: 100%;
    color: black;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    line-height:60px ;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.workk{
    background-color: transparent;
    position: absolute;
    font-size: 20px;
    top: 0;
    right: 10%;
    width: 26.66%;
    height: 100%;
    color: black;
    border-bottom: 1px solid gray;
    line-height:60px ;
}
.see{
    position: absolute;
    left: 30%;
    top: 25%;
    font-size: 20px;
    cursor: pointer;
}
.do {
    position: absolute;
    left: 55%;
    top: 25%;
    font-size: 20px;
    cursor: pointer;
}
.delete {
    position: absolute;
    left: 80%;
    top: 25%;
    font-size: 20px;
    cursor: pointer;
}
.title{
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%);
    font-size: 16px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.time1 {
    position: absolute;
    top: 25%;
    left: 50;
    transform: translate(-50%);
    font-size: 16px; 
}
.see:hover {
    color:blue
}
.do:hover {
    color:green
}
.delete:hover {
    color: red;
}
.picBox {
    height: 92%;
    width: 60%;
    position: absolute;
    top: 8%;
    left: 30%;
}
.picBox ul {
    position: relative;
    top: 10%;
    background-color: white;
    width: 100%;
    font-size: 15px;
    color: black;
}
.picBox ul li {
    position: relative;
    left: 50%;
    transform: translate(-50%);
    height: 100px;
    width: 100%;
    font-size: 15px;
    color: black;
    background-color: transparent;
}
.delete2 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    font-size: 16px;
    cursor: pointer;
}
.pic {
    height: 60px;
    width: 60px;
    object-fit: cover;
}
</style>